/**
 * 字典管理 - 遥调
 * @author xiaoxujs
 */

import { useCallback, useEffect, useState } from "react";
import { ButtonAddX, Search } from "../../../../components/UiManagement";
import { DicManagedEventBox, DicManagemedEventItem, DicManagemedEventUl, RolePageHeaderBox } from "./style";
import { INoFenye } from "../../../../type/common";
import AddChangeModule from './components/AddChangeModule'; // 新增事件分组弹框
import { PitModal } from '../../../../components/UiManagement'; // 新增事件分组弹框
import { useNavigate } from "react-router-dom";
import { ISyhtDictTelemetryGetDictTelemetryAll, ISyhtDictTelemetryGetDictTelemetryAllParams } from "../../../../type/ConfigManagement/DicManaged/DicManagedYaoce";
import { getSyhtDictTelemetryDeleteTelemetry, postSyhtDictTelemetryGetDictTelemetryAll } from "../../../../api/ConfigManagement/DicManaged/DicManagedYaoceApi";

const DicManagedEvent = () => {
    const navigate = useNavigate()//     路由跳转

    const [addChangeEventGroupingShow, setAddChangeEventGroupingShow] = useState(false); // 新增事件分组弹框
    const [deleteTipModalShow, setDeleteTipModalShow] = useState(false); // 删除提示弹框
    const [listData, setListData] = useState<ISyhtDictTelemetryGetDictTelemetryAll[]>([]); // 列表数据
    const [clickData, setClickData] = useState<ISyhtDictTelemetryGetDictTelemetryAll>(); // 点击的数据
    const [searchValue, setSearchValue] = useState<string>(''); // 检索
    const listFun = useCallback(
        async (params: ISyhtDictTelemetryGetDictTelemetryAllParams) => {
            const { code, msg, data } = await postSyhtDictTelemetryGetDictTelemetryAll(params) as INoFenye<ISyhtDictTelemetryGetDictTelemetryAll>;
            if (code === 200) {
                setListData(data)
            } else {
                setListData([])
                alert(msg)
            }

        },
        [],
    )

    useEffect(() => {
        listFun({})
    }, [listFun])



    // 检索
    const handleSearch = (value: string) => {
        setSearchValue(value) // 检索
        listFun({ telemetryName: value })
    }
    // 新增事件分组弹框回调
    const handleAddChangeModuleCallback = () => {
        setAddChangeEventGroupingShow(false) // 关闭弹窗
        listFun({}) // 刷新列表
    }
    // 删除提示弹框回调
    const handleDeletePitCallback = async (type: 'ok' | 'cancel') => {
        if (type === 'ok') {
            if (!clickData?.telemetryId) {
                return alert('请选择要删除的数据')
            }
            const { code, msg } = await getSyhtDictTelemetryDeleteTelemetry({ TelemetryId: clickData?.telemetryId }) as { code: number, msg: string};
            if (code === 200) {
                setDeleteTipModalShow(false) // 关闭弹窗
                setClickData(undefined) // 点击的数据 
                listFun({telemetryName: searchValue}) // 刷新列表
            } else {
                alert(msg)
            }
        } else {
            setDeleteTipModalShow(false) // 关闭弹窗
            setClickData(undefined) // 点击的数据
        }
    }
    return (
        <DicManagedEventBox>
            <RolePageHeaderBox>
                <div className="left">
                    <div className="left_left_jiantou"></div>
                    <div>全部列表</div>
                    <div className="left_right_jiantou"></div>
                </div>
                <div className="right">
                    <Search placeholder="请搜索关键字" searchChange={(value) => handleSearch(value)} />
                    <ButtonAddX style={{ marginLeft: '3rem' }} onClick={() => setAddChangeEventGroupingShow(true)}  >
                        添加分组
                    </ButtonAddX>
                </div>
            </RolePageHeaderBox>
            <DicManagemedEventUl>
                {
                    listData.map((item, index) => {
                        return <DicManagemedEventItem key={item.telemetryId}>
                            <div className="title">
                                <span>{item.telemetryName}</span>
                                <span aria-hidden="true" onClick={() => {
                                    setClickData(item) // 点击的数据
                                    setDeleteTipModalShow(true) // 打开弹窗
                                }} className="close_style">&times;</span>
                            </div>
                            <div className="button_box">
                                <div className="button_enter left" onClick={() => {
                                    navigate('/home/config/dic/dicManagedYaoce/dicManagedYaoceList', { state: item })
                                }}>
                                    进入管理
                                </div>
                                <div className="button_enter" onClick={() => {
                                    setClickData(item) // 点击的数据
                                    setAddChangeEventGroupingShow(true) // 打开弹窗
                                }}>
                                    编辑
                                </div>
                            </div>
                        </DicManagemedEventItem>
                    })
                }

            </DicManagemedEventUl>
            {/* // 新增事件分组弹框 */}
            <AddChangeModule changeData={clickData} open={addChangeEventGroupingShow} onClose={() => handleAddChangeModuleCallback()} />
            <PitModal open={deleteTipModalShow} onClose={handleDeletePitCallback} message={"确定要删除当前分组吗"} type={"delete"}></PitModal>
        </DicManagedEventBox>
    )
}

export default DicManagedEvent;